<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset='UTF-8'>
    <meta name='referrer' content='always'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>
    <title>Document</title>

    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" resize></canvas>
</body>

</html>

<script>





    paper.install(window);
    paper.setup('myCanvas');

    // 假设已知路径点数组，每个点是一个[x, y]数组
    var pathPoints = [
        new Point(50, 50),
        new Point(100, 50),
        new Point(150, 100),
        new Point(100, 150),
        new Point(50, 150)
    ];

    // 使用给定的路径点创建Path对象
    var path = new Path();
    path.strokeColor = 'black';
    path.fillColor = '#ccc';


    var hitOptions = {
        segments: true,
        stroke: true,
        fill: true,
        tolerance: 5
    };


    var segment;

    var movePath = false;

    var selectedSegment = null;

    function onMouseDown(event) {
        path.strokeColor = 'green';

        // segment = path = null;

        // var hitResult = project.hitTest(event.point, hitOptions);

        // var location = hitResult.location;

        // console.log("hitResult", hitResult);
        // console.log("location", location);


        // if (!hitResult)
        //     return;

        // if (event.modifiers.shift) {
        //     if (hitResult.type == 'segment') {
        //         hitResult.segment.remove();
        //     };
        //     return;
        // }

        // if (hitResult) {
        //     path = hitResult.item;
        //     if (hitResult.type == 'segment') {
        //         segment = hitResult.segment;
        //     } else if (hitResult.type == 'stroke') {
        //         var location = hitResult.location;
        //         segment = path.insert(location.index + 1, event.point);
        //         path.smooth();
        //     }
        // }
        // movePath = hitResult.type == 'fill';
        // if (movePath)
        //     project.activeLayer.addChild(hitResult.item);


    }

    function onMouseDrag(event) {
        // console.log("onMouseDrag",event)
        // path.add(event.point);

        console.log("onMouseDrag-event", event)

        path.position += event.point;

        // if (segment) {
        //     segment.point += event.delta;
        //     path.smooth();
        // } else if (path) {
        //     path.position += event.delta;
        // }
    }

    function onMouseUp(event) {
        var myCircle = new Path.Circle({
            center: event.point,
            radius: 10
        });
        myCircle.strokeColor = 'black';
        myCircle.fillColor = 'white';
    }


    function create_path(points_arr) {
        for (var i = 0; i < points_arr.length; i++) {
            var point = pathPoints[i];
            if (i === 0) {
                path.moveTo(point);
            } else {
                path.lineTo(point);
            }

            path.closePath();
        }
    }

    create_path(pathPoints);


    // 记录当前鼠标的位置
    let mouseDown = false;
    let offset = null;

    // 鼠标按下事件
    // function onMouseDown(event) {
    //     mouseDown = true;
    //     offset = event.point.subtract(path.position);

    //     path.strokeColor = 'green';
    // }

    // 鼠标移动事件
    // function onMouseMove(event) {
    //     if (mouseDown) {
    //         path.position = event.point.subtract(offset);
    //     }
    // }

    // 鼠标抬起事件
    // function onMouseUp(event) {
    //     mouseDown = false;
    // }



    //整体移动和点的拖动


    function onMouseDown(event) {

        mouseDown = true;

        // 检查鼠标点击是否在路径上
        var hitResult = paper.project.hitTest(event.point, {
            segments: true,
            fill: true,
            stroke: true
        });

        if (hitResult) {
            // 如果点击在路径的一个点上
            if (hitResult.type === 'segment') {
                selectedSegment = hitResult.segment;
                // 开始拖动操作
            }
        } else { //不是路径
            offset = event.point.subtract(path.position);
            path.strokeColor = 'green';
        }


    }

    // 监听鼠标移动事件
    function onMouseMove(event) {

        var hitResult = paper.project.hitTest(event.point, {
            segments: true,
            fill: true,
            stroke: true
        });

        console.log("hitResult", hitResult)

        if (hitResult) {

            // path = hitResult.item;
            // if (hitResult.type == 'segment') {
            //     segment = hitResult.segment;
            // }


            // 如果点击在路径的一个点上
            if (selectedSegment) {
                // 更新点的位置
                selectedSegment.point = event.point;
            }
        } else {

            if (mouseDown) {
                path.position = event.point.subtract(offset);
            }
        }




    }

    // 监听鼠标抬起事件
    function onMouseUp(event) {

        selectedSegment = null;

        mouseDown = false;
    }


    function onMouseDrag(event) {
        if (segment) {
            segment.point += event.delta;
            // path.smooth();
        } else if (path) {
            path.position += event.delta;
        }
    }




    // 添加事件监听
    paper.view.onMouseDown = onMouseDown;
    paper.view.onMouseMove = onMouseMove;
    paper.view.onMouseUp = onMouseUp;
    // paper.view.onMouseDrag = onMouseDrag;


</script>